<template>
  <div class="consultation">
    <div class="consultation_top">
      <div class="consultation_top_img">
        <div class="consultation_top_tips" @click="releaseRequirements">
          发布需求
        </div>
      </div>
    </div>
    <div class="consultation_middle">
      <div class="consultation_middle_doctorRegistration">
        <div
          class="consultation_middle_doctorRegistration_text"
          @click="toDoctorRegister"
        >
          <h3>医生挂号</h3>
        </div>
      </div>
      <van-badge dot>
        <div
          class="consultation_middle_consultingRoom"
          @click="tocommunication"
        >
          <div class="consultation_middle_consultingRoom_text">
            <h3>问诊室</h3>
          </div>
        </div>
      </van-badge>
    </div>
  </div>
</template>

<script>
export default {
  name: "consultation",
  data() {
    return {};
  },
  methods: {
    releaseRequirements() {
      this.$router.push({ path: "/home/consultation/releaseRequirets" });
    },
    toDoctorRegister() {
      this.$router.push({
        path: "/home/consultation/doctorRegistIndex",
      });
    },
    tocommunication() {
      this.$router.push({
        path: "/home/consultation/communication",
      });
    },
  },
};
</script>

<style lang="scss" scope>
h3 {
  margin: 0;
}
.van-badge__wrapper {
  width: 100%;
}
.consultation {
  background-color: #fafafa;
  width: 100%;
  height: 100%;
  &_top {
    position: relative;
    width: 100%;
    height: 130px;
    background-image: linear-gradient(to top left, #7ac1ec, #1fe4bf);
    border-radius: 0 0 80px 80px;
    &_tips {
      font-size: 20px;
    }
    &_img {
      position: absolute;
      bottom: -20%;
      left: 50%;
      width: 130px;
      background-color: #278374;
      border-radius: 10px;
      color: #fff;
      height: 50px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      & img {
        object-fit: cover;
      }
    }
  }
  &_middle {
    width: 100%;
    padding: 100px 40px 10px;
    &_doctorRegistration {
      margin-bottom: 50px;
      position: relative;
      width: 100%;
      height: 120px;
      background-color: #97cdfb;
      &_text {
        color: #333;
        font-size: 22px;
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translateY(-50%);
      }
    }
    &_consultingRoom {
      position: relative;
      width: 100%;
      height: 120px;
      background-color: #aff888;
      &_text {
        color: #333;
        font-size: 22px;
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
